<template>
  <div title="对齐" class="tlbr-btn hm">
    <div
      class="tlbr-btn__icon"
      v-html="alignMap.get(alignType || 'justify')?.icon"
    ></div>
    <svg
      width="4"
      height="4"
      viewBox="0 0 4 4"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="tlbr-btn__dot"
    >
      <path d="M4 0V4H0L4 0Z" fill="#222222"></path>
    </svg>
    <div class="tlbr-btn__more">
      <div class="tlbr-btn__more__tooltip">
        <ul class="bre-toolbar__optlist icons">
          <li
            class="bre-toolbar__optbtn"
            v-for="(item, index) in alignList"
            :key="index"
            @click="changeAlign(item)"
          >
            <div class="bre-toolbar__optbtn__icon" v-html="item.icon"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject, shallowRef, computed, watch } from 'vue'
import Quill from 'quill'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const formatMap = inject('formatMap', ref<Record<string, any>>({}))
const getSelectionFormat = inject('getSelectionFormat', () => {})
const alignType = computed(() => {
  return formatMap.value.align
})
interface ALIGN_OPT_ITEM {
  value: string
  icon: string
}
const LeftSvg = `
<svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M4.6 6C4.26863 6 4 6.26863 4 6.6C4 6.93137 4.26863 7.2 4.6 7.2H19.4C19.7314 7.2 20 6.93137 20 6.6C20 6.26863 19.7314 6 19.4 6H4.6ZM4.6 13C4.26863 13 4 13.2686 4 13.6C4 13.9314 4.26863 14.2 4.6 14.2H19.4C19.7314 14.2 20 13.9314 20 13.6C20 13.2686 19.7314 13 19.4 13H4.6ZM4 10.1C4 9.76863 4.26863 9.5 4.6 9.5H15.4C15.7314 9.5 16 9.76863 16 10.1C16 10.4314 15.7314 10.7 15.4 10.7H4.6C4.26863 10.7 4 10.4314 4 10.1ZM4.6 16.5C4.26863 16.5 4 16.7686 4 17.1C4 17.4314 4.26863 17.7 4.6 17.7H15.4C15.7314 17.7 16 17.4314 16 17.1C16 16.7686 15.7314 16.5 15.4 16.5H4.6Z"
      fill="currentColor"
    ></path>
  </svg>
`
const CenterSvg = `
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M4.6 6C4.26863 6 4 6.26863 4 6.6C4 6.93137 4.26863 7.2 4.6 7.2H19.4C19.7314 7.2 20 6.93137 20 6.6C20 6.26863 19.7314 6 19.4 6H4.6ZM4.6 13C4.26863 13 4 13.2686 4 13.6C4 13.9314 4.26863 14.2 4.6 14.2H19.4C19.7314 14.2 20 13.9314 20 13.6C20 13.2686 19.7314 13 19.4 13H4.6ZM6 10.1C6 9.76863 6.26863 9.5 6.6 9.5H17.4C17.7314 9.5 18 9.76863 18 10.1C18 10.4314 17.7314 10.7 17.4 10.7H6.6C6.26863 10.7 6 10.4314 6 10.1ZM6.6 16.5C6.26863 16.5 6 16.7686 6 17.1C6 17.4314 6.26863 17.7 6.6 17.7H17.4C17.7314 17.7 18 17.4314 18 17.1C18 16.7686 17.7314 16.5 17.4 16.5H6.6Z"
      fill="currentColor"
    ></path>
  </svg>
`
const RightSvg = `
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M4.6 6C4.26863 6 4 6.26863 4 6.6C4 6.93137 4.26863 7.2 4.6 7.2H19.4C19.7314 7.2 20 6.93137 20 6.6C20 6.26863 19.7314 6 19.4 6H4.6ZM4.6 13C4.26863 13 4 13.2686 4 13.6C4 13.9314 4.26863 14.2 4.6 14.2H19.4C19.7314 14.2 20 13.9314 20 13.6C20 13.2686 19.7314 13 19.4 13H4.6ZM8 10.1C8 9.76863 8.26863 9.5 8.6 9.5H19.4C19.7314 9.5 20 9.76863 20 10.1C20 10.4314 19.7314 10.7 19.4 10.7H8.6C8.26863 10.7 8 10.4314 8 10.1ZM8.6 16.5C8.26863 16.5 8 16.7686 8 17.1C8 17.4314 8.26863 17.7 8.6 17.7H19.4C19.7314 17.7 20 17.4314 20 17.1C20 16.7686 19.7314 16.5 19.4 16.5H8.6Z"
      fill="currentColor"
    ></path>
  </svg>
`
const alignMap = new Map<string, ALIGN_OPT_ITEM>()
const alignList = ref<ALIGN_OPT_ITEM[]>([
  {
    value: 'justify',
    icon: LeftSvg,
  },
  {
    value: 'center',
    icon: CenterSvg,
  },
  {
    value: 'right',
    icon: RightSvg,
  },
])
alignList.value.forEach((el) => {
  alignMap.set(el.value, el)
})
const changeAlign = (item: ALIGN_OPT_ITEM) => {
  QuillEditor.value!.focus()
  QuillEditor.value!.format('align', item.value)
  getSelectionFormat()
}
</script>
<style lang="scss" scoped></style>
